<!DOCTYPE html>
<html lang="en">

<head>
  @@include('./meta.html',{})
</head>

<body class="app-component">
  @@include('./header.html',{
  "components": "active"
  })
  <div class="component-wrapper">
    <div class="component-navleft">
      @@include('./navleft.html',{
      "tab_element": "active"
      })
    </div><!-- component-navleft -->

    <div class="component-sidebar">
      @@include('./sidebar.html',{
      "tab_element": "active",
      "accordion": "active",
      "urlPrefix": "."
      })
    </div><!-- component-sidebar -->

    <div class="component-content">
      <div class="component-content-header">
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb breadcrumb-style1 mg-b-0">
            <li class="breadcrumb-item"><a href="#">Components</a></li>
            <li class="breadcrumb-item"><a href="#">UI Elements</a></li>
            <li class="breadcrumb-item active" aria-current="page">Accordion</li>
          </ol>
        </nav>
        <a href="javascript:;" id="componentOptions" class="text-secondary mg-l-auto d-xl-none"><i data-feather="more-horizontal"></i></a>
      </div><!-- component-content-header -->

      <div class="component-content-body" data-spy="scroll" data-target="#navSection" data-offset="120">
        <div class="content content-components">
          <div class="container">
            <!--sd-->
            <h1 class="td-title">Accordion</h1>
        <p class="td-lead">Toggle the visibility of content across your project with a few classes and our jquery codes.</p>

        <hr class="mg-y-40">

        <h4 id="section1" class="mg-b-10">Default Functionality</h4>
        <p class="mg-b-30">Click headers to expand/collapse content that is broken into logical sections, much like tabs. Optionally, toggle sections open/closed on mouseover.</p>

        <div data-label="Example" class="td-example">
          <div id="accordion1" class="accordion">
            <h6 class="accordion-title">What does royalty free mean?</h6>
            <div class="accordion-body">Royalty free means you just need to pay for rights to use the item once per end product. You don't need to pay additional or ongoing fees for each person who sees or uses it.</div>
            <h6 class="accordion-title">What do you mean by item and end product?</h6>
            <div class="accordion-body">The item is what you purchase from Envato Market. The end product is what you build with that item. For example, the item is a business card template; the end product is the finalized business card. The item is a button graphic; the end product is an app using the button graphic in the app's interface. </div>
            <h6 class="accordion-title">What are some examples of permitted end products?</h6>
            <div class="accordion-body">You can buy a web template, add your text and images, and use it as your website. You can buy an HTML site template, convert it to WordPress, and use it as your website (but not as a stock template for sale. You can buy a flyer template, modify the text, print a flyer, and hand it out. You can buy a game starter kit, compile it, and put the game on an app store. You can buy a music track and use it in your radio or TV ad.</div>
          </div><!-- az-accordion -->
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;div class="accordion"&gt;
  &lt;h6&gt;What does royalty free mean?&lt;/h6&gt;
  &lt;div&gt;...&lt;/div&gt;
  &lt;h6&gt;What do you mean by item and end product?&lt;/h6&gt;
  &lt;div&gt;...&lt;/div&gt;
  &lt;h6&gt;What are some examples of permitted end products?&lt;/h6&gt;
  &lt;div&gt;...&lt;/div&gt;
&lt;/div&gt;</code></pre>
  <pre><code class="language-js">$('#accordion').accordion({
  heightStyle: 'content'
});</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section2" class="mg-b-10">Collapse Content</h4>
        <p class="mg-b-30">By default, accordions always keep one section open. To allow for all sections to be be collapsible, set the collapsible option to true. Click on the currently open section to collapse its content pane.</p>

        <div data-label="Example" class="td-example">
          <div id="accordion2" class="accordion">
            <h6 class="accordion-title">What does royalty free mean?</h6>
            <div class="accordion-body">Royalty free means you just need to pay for rights to use the item once per end product. You don't need to pay additional or ongoing fees for each person who sees or uses it.</div>
            <h6 class="accordion-title">What do you mean by item and end product?</h6>
            <div class="accordion-body">The item is what you purchase from Envato Market. The end product is what you build with that item. For example, the item is a business card template; the end product is the finalized business card. The item is a button graphic; the end product is an app using the button graphic in the app's interface. </div>
            <h6 class="accordion-title">What are some examples of permitted end products?</h6>
            <div class="accordion-body">You can buy a web template, add your text and images, and use it as your website. You can buy an HTML site template, convert it to WordPress, and use it as your website (but not as a stock template for sale. You can buy a flyer template, modify the text, print a flyer, and hand it out. You can buy a game starter kit, compile it, and put the game on an app store. You can buy a music track and use it in your radio or TV ad.</div>
          </div><!-- az-accordion -->
        </div><!-- td-example -->
        <pre><code class="language-js">$('#accordion').accordion({
  heightStyle: 'content',
  collapsible: true
});</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section3" class="mg-b-10">Custom Style</h4>
        <p class="mg-b-30">We've created a custom style to the active state panel based on the brand color for this template.</p>

        <div data-label="Style 1" class="td-example">
          <div id="accordion3" class="accordion accordion-style1">
            <h6 class="accordion-title">What does royalty free mean?</h6>
            <div class="accordion-body">Royalty free means you just need to pay for rights to use the item once per end product. You don't need to pay additional or ongoing fees for each person who sees or uses it.</div>
            <h6 class="accordion-title">What do you mean by item and end product?</h6>
            <div class="accordion-body">The item is what you purchase from Envato Market. The end product is what you build with that item. For example, the item is a business card template; the end product is the finalized business card. The item is a button graphic; the end product is an app using the button graphic in the app's interface. </div>
            <h6 class="accordion-title">What are some examples of permitted end products?</h6>
            <div class="accordion-body">You can buy a web template, add your text and images, and use it as your website. You can buy an HTML site template, convert it to WordPress, and use it as your website (but not as a stock template for sale. You can buy a flyer template, modify the text, print a flyer, and hand it out. You can buy a game starter kit, compile it, and put the game on an app store. You can buy a music track and use it in your radio or TV ad.</div>
          </div><!-- az-accordion -->
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;div class="accordion accordion-style1"&gt;...&lt;/div&gt;</code></pre>

        <div data-label="Style 2" class="td-example mg-t-50">
          <div id="accordion4" class="accordion accordion-style2">
            <h6 class="accordion-title">What does royalty free mean?</h6>
            <div class="accordion-body">Royalty free means you just need to pay for rights to use the item once per end product. You don't need to pay additional or ongoing fees for each person who sees or uses it.</div>
            <h6 class="accordion-title">What do you mean by item and end product?</h6>
            <div class="accordion-body">The item is what you purchase from Envato Market. The end product is what you build with that item. For example, the item is a business card template; the end product is the finalized business card. The item is a button graphic; the end product is an app using the button graphic in the app's interface. </div>
            <h6 class="accordion-title">What are some examples of permitted end products?</h6>
            <div class="accordion-body">You can buy a web template, add your text and images, and use it as your website. You can buy an HTML site template, convert it to WordPress, and use it as your website (but not as a stock template for sale. You can buy a flyer template, modify the text, print a flyer, and hand it out. You can buy a game starter kit, compile it, and put the game on an app store. You can buy a music track and use it in your radio or TV ad.</div>
          </div><!-- az-accordion -->
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;div class="accordion accordion-style2"&gt;...&lt;/div&gt;</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section4" class="mg-b-10">Colored Variant</h4>
        <p class="mg-b-30">We've created a colored variant style based on the secondary brand color and dark color.</p>

        <div data-label="Style Default" class="td-example">
          <div id="accordion5" class="accordion accordion-pink">
            <h6 class="accordion-title">What does royalty free mean?</h6>
            <div class="accordion-body">Royalty free means you just need to pay for rights to use the item once per end product. You don't need to pay additional or ongoing fees for each person who sees or uses it.</div>
            <h6 class="accordion-title">What do you mean by item and end product?</h6>
            <div class="accordion-body">The item is what you purchase from Envato Market. The end product is what you build with that item. For example, the item is a business card template; the end product is the finalized business card. The item is a button graphic; the end product is an app using the button graphic in the app's interface. </div>
            <h6 class="accordion-title">What are some examples of permitted end products?</h6>
            <div class="accordion-body">You can buy a web template, add your text and images, and use it as your website. You can buy an HTML site template, convert it to WordPress, and use it as your website (but not as a stock template for sale. You can buy a flyer template, modify the text, print a flyer, and hand it out. You can buy a game starter kit, compile it, and put the game on an app store. You can buy a music track and use it in your radio or TV ad.</div>
          </div><!-- az-accordion -->
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;div class="accordion accordion-pink"&gt;...&lt;/div&gt;</code></pre>

        <div data-label="Style 1" class="td-example mg-t-50">
          <div id="accordion6" class="accordion accordion-style1 accordion-teal">
            <h6 class="accordion-title">What does royalty free mean?</h6>
            <div class="accordion-body">Royalty free means you just need to pay for rights to use the item once per end product. You don't need to pay additional or ongoing fees for each person who sees or uses it.</div>
            <h6 class="accordion-title">What do you mean by item and end product?</h6>
            <div class="accordion-body">The item is what you purchase from Envato Market. The end product is what you build with that item. For example, the item is a business card template; the end product is the finalized business card. The item is a button graphic; the end product is an app using the button graphic in the app's interface. </div>
            <h6 class="accordion-title">What are some examples of permitted end products?</h6>
            <div class="accordion-body">You can buy a web template, add your text and images, and use it as your website. You can buy an HTML site template, convert it to WordPress, and use it as your website (but not as a stock template for sale. You can buy a flyer template, modify the text, print a flyer, and hand it out. You can buy a game starter kit, compile it, and put the game on an app store. You can buy a music track and use it in your radio or TV ad.</div>
          </div><!-- az-accordion -->
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;div class="accordion accordion-style1 accordion-teal"&gt;...&lt;/div&gt;</code></pre>

        <div data-label="Style 2" class="td-example mg-t-50">
          <div id="accordion7" class="accordion accordion-style2 accordion-dark">
            <h6 class="accordion-title">What does royalty free mean?</h6>
            <div class="accordion-body">Royalty free means you just need to pay for rights to use the item once per end product. You don't need to pay additional or ongoing fees for each person who sees or uses it.</div>
            <h6 class="accordion-title">What do you mean by item and end product?</h6>
            <div class="accordion-body">The item is what you purchase from Envato Market. The end product is what you build with that item. For example, the item is a business card template; the end product is the finalized business card. The item is a button graphic; the end product is an app using the button graphic in the app's interface. </div>
            <h6 class="accordion-title">What are some examples of permitted end products?</h6>
            <div class="accordion-body">You can buy a web template, add your text and images, and use it as your website. You can buy an HTML site template, convert it to WordPress, and use it as your website (but not as a stock template for sale. You can buy a flyer template, modify the text, print a flyer, and hand it out. You can buy a game starter kit, compile it, and put the game on an app store. You can buy a music track and use it in your radio or TV ad.</div>
          </div><!-- az-accordion -->
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;div class="accordion accordion-style2 accordion-dark"&gt;...&lt;/div&gt;</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section5" class="mg-b-10">Your Own Color Skin</h4>
        <p class="mg-b-30">You can always add your own color skin to accordion by calling this mixin below for adding your own accordion color skin.</p>


        <pre><code class="language-css">.accordion-mycolor {
  @include accordion-variant('color', 'lighten color');
}</code></pre>
        <pre><code class="language-html">&lt;div class="accordion accordion-mycolor"&gt;...&lt;/div&gt;</code></pre>
            @@include('./footer.html',{})
            <!-- content-footer -->
          </div>
        </div>
      </div><!-- component-content-body -->

      <div class="component-content-sidebar section-nav">
        <label class="tx-10 tx-medium tx-spacing-1 tx-color-03 tx-uppercase tx-sans mg-b-15">On This Page</label>
        <nav id="navSection" class="nav flex-column">
          <a href="#section1" class="nav-link">Default Functionality</a>
          <a href="#section2" class="nav-link">Collapse Content</a>
          <a href="#section3" class="nav-link">Custom Style</a>
          <a href="#section4" class="nav-link">Colored Variant</a>
          <a href="#section5" class="nav-link">Your Own Color Skin</a>
        </nav>
      </div><!-- component-content-sidebar -->
    </div><!-- component-content -->

  </div><!-- component-wrapper -->

  @@include('./_script.html',{})

  <script src="../lib/jqueryui/jquery-ui.min.js"></script>

  <script>
    $(function(){
        'use strict'

        // Default functionality
        $('#accordion1').accordion({
          heightStyle: 'content'
        });

        // Collapse content
        $('#accordion2').accordion({
          heightStyle: 'content',
          collapsible: true
        });

        // Custom style
        $('#accordion3').accordion({
          heightStyle: 'content'
        });

        $('#accordion4').accordion({
          heightStyle: 'content'
        });

        // Colored variant
        $('#accordion5').accordion({
          heightStyle: 'content'
        });

        $('#accordion6').accordion({
          heightStyle: 'content'
        });

        $('#accordion7').accordion({
          heightStyle: 'content'
        });

        $('#accordion8').accordion({
          heightStyle: 'content'
        });
      });
  </script>
</body>

</html>